<template>
    <div class="order-name" :state="info.order_state" :type="active.type">
        <svg-icon :name="active.icon" />
        <span v-text="active.name"></span>
        <img src="@/assets/images/loading.gif" v-if="info.order_state == 2 && info.order_pay_state == 1">
    </div>
</template>
<script>
export default {
    name: "OrderName",
    props: { info: { type: Object, require: true, default: () => { } } },
    computed: {

        active () {

            const info = this.info || {}
            // const code = info.order_state;
            // icon-user-a-Tobeoperated 感叹
            // icon-user-Refund 勾
            // icon-user-a-Inproduction 沙漏
            // icon-user-a-Problemorder 问题


            // 1: 未支付（可转为：11已取消、13待操作、14待操作）
            // 2: 已支付（可转为：12退款订单、15问题订单）
            // 3: 已生成工单（状态显示为正在生产；可转为：12退款订单、15问题订单）
            // 4: 正在生产
            // 5: 生产完成
            // 6: 质检合格
            // 7: 已贴运单（状态显示为已发货）
            // 8: 物流已揽收（状态显示为已发货）
            // 9: 运输中（状态显示为已发货）
            // 10: 已完成
            // 11: 已取消
            // 12: 已退款
            // 13: 待操作-同e步商品(未支付状态)
            // 14: 待操作-地址不可到达(未支付状态)
            // 15: 问题订单

            const all_custom_count = info.all_custom_count
            const code = info.order_state;
            const pay = info.order_pay_state
            const status = {
                1: { type: 'warning', icon: 'order-warning', name: 'Unpaid' },
                2: { type: 'success', icon: 'order-success', name: 'Paid' },
                3: { type: 'success', icon: 'order-success', name: 'In production' },
                4: { type: 'success', icon: 'order-success', name: 'In production' },
                5: { type: 'success', icon: 'order-success', name: 'Production completed' },
                6: { type: 'success', icon: 'order-success', name: 'Quality checked' },
                7: { type: 'success', icon: 'order-success', name: 'In transit' },
                8: { type: 'success', icon: 'order-success', name: 'In transit' },
                9: { type: 'success', icon: 'order-success', name: 'Delivered' },
                10: { type: 'success', icon: 'order-success', name: 'Complete' },
                11: { type: 'disabled', icon: 'order-success', name: 'Cancelled' },
                12: { type: 'disabled', icon: 'order-success', name: 'Refunded' },
                13: { type: 'error', icon: 'order-warning', name: 'Unsynced' },
                14: { type: 'error', icon: 'order-warning', name: 'Invalid shipping address' },
                15: { type: 'error', icon: 'order-warning', name: 'Suspended' },
            }[code];

            if (code == 1 && all_custom_count > 0) {
                return { type: 'warning', icon: 'order-warning', name: 'Customization' }
            } else if (code == 2 && pay == 1) {
                // panding
                return { type: 'warning', icon: 'order-success', name: 'Pending' }
            } else if (code == 2 && pay == 2) {
                // delayed
                return { type: 'warning', icon: 'order-success', name: 'Delayed transaction' }
            } else if (code == 2 && pay == 11) {
                // 退款中
                return { type: 'warning', icon: 'order-warning', name: 'Refunding' }
            } else if (code == 2 && (pay == 10 || pay == 0)) {
                // complete
                return { type: 'success', icon: 'order-success', name: 'Paid' }
            } else if (code == 2 && pay == 20) {
                // failed
                return { type: 'error', icon: 'order-warning', name: 'Payment failed' }
            } else {
                return status;
            }
        },

    },
};
</script>
<style lang="scss" scoped>
.order-name {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba($color: #757575, $alpha: 0.08);
    color: #757575;
    height: 28px;
    border-radius: 28px;
    padding: 0 10px 0 4px;

    svg {
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }

    span {
        position: relative;
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        line-height: 16px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    img {
        width: 16px;
        height: 16px;
    }

    &[type='success'] {
        color: #008552;
        background-color: rgba($color: #008552, $alpha: 0.08);
    }

    &[type='warning'] {
        color: #e37e00;
        background-color: rgba($color: #e37e00, $alpha: 0.1);
    }

    &[type='error'] {
        color: #c62828;
        background-color: rgba($color: #c62828, $alpha: 0.08);
    }

    &[type='disabled'] {
        color: #555;
        background-color: rgba($color: #0d0c22, $alpha: 0.08);
    }

    // &::v-deep {
    //     i {
    //         font-size: 24px;
    //         margin-right: 3px;
    //     }
    //     b {
    //         font-weight: normal;
    //         font-size: 16px;
    //     }
    //     em {
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;
    //     }
    // }

    // &[loading]::after {
    //     content: '';
    //     display: inline-block;
    //     width: 16px;
    //     height: 16px;
    //     background-image: url(@/assets/images/loading.gif);
    //     background-repeat: no-repeat;
    //     background-size: 100% 100%;
    //     margin-left: 3px;
    // }
}
</style>
